<script setup lang="ts">
import { ref } from 'vue'
import {
  getMemberAddressDetailAPI,
  postMemberAddressAPI,
  putMemberAddressAPI,
} from '@/services/address'
import { onLoad } from '@dcloudio/uni-app'

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})
// 判断是否有ID 如果有ID，则修改地址
const query = defineProps<{
  id?: string
}>()
uni.setNavigationBarTitle({
  title: query.id ? '修改地址' : '新增地址',
})
// 获取数据详情并回显
const getMemberAddressDetail = async () => {
  if (query.id) {
    const res = await getMemberAddressDetailAPI(query.id!)
    form.value = res.result
  }
}
onLoad(() => {
  getMemberAddressDetail()
})

// #ifdef MP-WEIXIN
// 选择地址
const onRegionChange: UniHelper.RegionPickerOnChange = (e) => {
  form.value.fullLocation = e.detail.value.join(' ')
  // 地区代码
  form.value.provinceCode = e.detail.code![0]
  form.value.cityCode = e.detail.code![1]
  form.value.countyCode = e.detail.code![2]
}
// #endif

// #ifdef APP-PLUS || H5
// 选择地址
const onCityChange: UniHelper.UniDataPickerOnChange = (e) => {
  const regionCode = e.detail.value.map(item => item.value)
	// 地区代码
	form.value.provinceCode = regionCode[0]
	form.value.cityCode = regionCode[1]
	form.value.countyCode = regionCode[2]
}
// #endif


// 切换默认开关
const onSwitchChange: UniHelper.SwitchOnChange = (e) => {
  form.value.isDefault = e.detail.value ? 1 : 0
}

// 校验规则
const rules: UniHelper.UniFormsRules = {
  receiver: {
    rules: [{ required: true, errorMessage: '请输入收货人姓名' }],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入联系方式' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' },
    ],
  },
  countyCode: {
    rules: [{ required: true, errorMessage: '请选择所在地区' }],
  },
  address: {
    rules: [{ required: true, errorMessage: '请选择详细地址' }],
  },
}
// 获取表单组件实例，用于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>() // [!code ++]

// 提交数据
const onSumbit = async () => {
  try {
    // 表单校验
    await formRef.value?.validate?.() // [!code ++]
    if (!query.id) {
      // 新增地址
      await postMemberAddressAPI(form.value)
    } else {
      // 修改地址
      await putMemberAddressAPI(query.id, form.value)
    }
    await uni.showToast({
      title: query.id ? '修改成功' : '添加成功',
      icon: 'success',
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 500)
  } catch (error) {
    // 错误提示
    await uni.showToast({ icon: 'error', title: '请填写完整信息' }) // [!code ++]
  }
}
</script>

<template>
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formRef">
      <!-- 表单内容 -->
      <uni-forms-item name="receiver" class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item name="contact" class="form-item">
        <text class="label">手机号码</text>
        <input
          class="input"
          placeholder="请填写收货人手机号码"
          :maxlength="11"
          v-model="form.contact"
        />
      </uni-forms-item>
      <uni-forms-item name="countyCode" class="form-item">
        <text class="label">所在地区</text>
				<!-- #ifdef H5 || APP-PLUS -->
				<uni-data-picker 
				placeholder="请选择地址" 
				popup-title="请选择城市" 
				collection="opendb-city-china" 
				field="code as value, name as text" 
				orderby="value asc" 
				:step-searh="true" 
				self-field="code" 
				parent-field="parent_code"
				:clear-icon="false"
				@change="onCityChange"
				v-model="form.countyCode"
				 />
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<picker
				  class="picker"
				  @change="onRegionChange"
				  mode="region"
				  :value="form.fullLocation.split(' ')"
				>
				  <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
				  <view v-else class="placeholder">请选择省/市/区(县)</view>
				</picker>
				<!-- #endif -->
        
      </uni-forms-item>
      <uni-forms-item name="address" class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch
          class="switch"
          color="#27ba9b"
          @change="onSwitchChange"
          :checked="form.isDefault === 1"
        />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button @click="onSumbit" class="button">保存并使用</button>
</template>

<style lang="scss">
	/* #ifdef APP-PLUS || H5 */
	:deep(.selected-area){
		height: auto;
		flex: 0 1 auto;
	}
	/* #endif */
	
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
